<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>首页</title>
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"/>
<script src="../static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	#right{
		position: absolute;
		top: 70px;
		left:300px;
		width:1200px
	}
	td{
		text-align: center;
	}
	.option{
		text-align: center;
	}
</style>
</head>
<body>
<div th:replace="Top :: head"></div>
<div th:replace="Top :: left"></div>
<div id="right">
<ul class="breadcrumb">
	<li><a href="/index">首页</a></li>
	<li><a href="">报销单列表</a></li>
</ul>
<table class="table table-bordered" id="table">
		<tr>
			<td>报销编号</td>
			<td>员工编号</td>
			<td>员工姓名</td>
			<td>报销金额</td>
			<td>报销原因</td>
			<td>报销类型</td>
			<td>申请时间</td>
			<td>申请状态</td>
			<td>审核人</td>
			<td colspan="2" >操       作</td>
		 </tr>
		 <tr th:each="expense : ${Expenses}">
            <td th:text="${expense.e_id}"></td>
            <td th:text="${expense.u_id}"></td>
            <td th:text="${expense.u_nickname}"></td>
            <td th:text="${expense.e_salary}"></td>
            <td th:text="${expense.e_reason}"></td>
            <td th:text="${expense.e_ename}"></td>
            <td th:text="${expense.e_date}"></td>
            <td th:switch="${expense.e_statu}">
				<span th:case="0" style="color: blue;">审核中</span>
				<span th:case="1" style="color: #00FF00;">审核通过</span>
				<span th:case="2" style="color: red;">审核失败</span>
			</td>	
            <td th:text="${expense.e_checkman}"></td>
            <!--<td>
			<button class="btn btn-primary btn-lg getOne" data-toggle="modal" data-target="#B"  th:id="${expense.e_id}">编辑</button>
            </td>-->
           <!-- <td>
            	<button class="btn btn-primary btn-lg delOne" th:id="${expense.e_id}" >删除</button>
            </td> -->
            <td th:switch="${expense.e_statu}">
            	<span th:case="0">
            		<button class="btn btn-info modify btn-primary approve" th:id="${expense.e_id}">批准</button>
            	</span>
            	<span th:case="*"></span>
            </td>
            <td th:switch="${expense.e_statu}">
            	<span th:case="0">
            		<button class="btn btn-danger refuse" th:id="${expense.e_id}">驳回</button>
            	</span>
            	<span th:case="*"></span>
            </td>
        </tr>
</table>

<!-- 修改报销单 -->
<div class="modal fade" th:id="B" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					编辑员工信息
				</h4>
			</div>
			<div class="modal-body">
				<p>报销单号：<input readonly="readonly" id="e_id"/></p>
				<p>员工姓名：<input readonly="readonly" id="u_nickname"/></p>
				<p>报销金额：<input id="e_salary"/></p>
				<p>报销原因：<input id="e_reason"/></p>
				<p>报销类型：					
					<select name="merchantNo" class="form-control" style="width: 120px;" id="et_id">
                  		<option value="">请选择</option>
                 		<option value="1">出差</option>
                 		<option value="2">餐补</option>
                 		<option value="3">交通补助</option>
                 		<option value="4">项目报销</option>
                 		<option value="5">其他</option>
             	 	</select>
				</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary updateUser">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

<!-- 增加报销单 -->
<!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	增加
</button>-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					增加报销单
				</h4>
			</div>
			<div class="modal-body">
				<p>员工编号：<input class="u_id"/></p>
				<p>报销金额：<input class="e_salary"/></p>
				<p>报销原因：<input class="e_reason"/></p>
				<p>报销类型：					
					<select name="merchantNo" class="form-control et_id" style="width: 100px;">
                  		<option value="">请选择</option>
                 		<option value="1">出差</option>
                 		<option value="2">餐补</option>
                 		<option value="3">交通补助</option>
                 		<option value="4">项目报销</option>
                 		<option value="5">其他</option>
             	 	</select>
				</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary addOne">
					提交
				</button>
			</div>
		</div>
	</div>/
</div>
</div>
</body>
<script type="text/javascript">
//点击删除
		    $(".delOne").bind('click',function(){
			      $.ajax({
						type:"get",
						url:"delOneExpense",
						async:false,
						data:{
							id:$(this).attr('id')
						},
						success:function(data){
							if(data=="ok"){
								alert("删除成功")
							}else{
								alert("删除失败")
							}
							location.reload()
						}
					});
			    })
			    
//点击获取报销id
			    $(".getOne").bind('click',function(){
			    	var id=$(this).attr('id')
				      $.ajax({
							type:"post",
							url:"getOneExpense",
							async:false,
							data:{
								id:id
							},
							success:function(data){
								var e_id=data.e_id
								var u_nickname=data.u_nickname
								var e_salary=data.e_salary
								var e_reason=data.e_reason
								var et_id=data.et_id
								$("#e_id").val(e_id)
								$("#u_nickname").val(u_nickname)
								$("#e_salary").val(e_salary)
								$("#e_reason").val(e_reason)
								$("#et_id").val(et_id)
							}
						});
				    })	    
		
//点击提交修改报销单
			    $(".updateUser").bind('click',function(){
				      $.ajax({
							type:"post",
							url:"updateOneExpense",
							async:false,
							data:{
								e_id:$("#e_id").val(),
								e_salary:parseFloat($("#e_salary").val()),
								e_reason:$("#e_reason").val(),
								et_id:parseInt($("#et_id").val())
							},
							success:function(data){
								if(data=="ok"){
									alert("修改成功")
								}else{
									alert("修改失败")
								}
								location.reload()
							}
						});
				    })
				    
				    
//点击添加报销单
			    $(".addOne").bind('click',function(){
				      $.ajax({
							type:"get",
							url:"addOneExpense",
							async:false,
							data:{
								id:$(this).attr('id'),
							},
							success:function(data){
								if(data=="ok"){
									alert("添加成功")
								}else{
									alert("添加失败")
								}
								location.reload()
							}
						});
				    })
//点击批准
			    $(".approve").bind('click',function(){
			    	if(confirm("确认批准这条申请吗？")){
				      $.ajax({
							type:"post",
							url:"approveOneExpense",
							async:false,
							data:{
								id:$(this).attr('id')
							},
							success:function(data){
								if(data=="ok"){
									alert("批准成功")
								}else{
									alert("批准失败")
								}
								location.reload()
							}
						});
						}
				    })
//点击拒绝
			     $(".refuse").bind('click',function(){
			     	if(confirm("确认驳回这条申请吗？")){
				      $.ajax({
							type:"post",
							url:"refuseOneExpense",
							async:false,
							data:{
								id:$(this).attr('id')
							},
							success:function(data){
								if(data=="ok"){
									alert("拒绝成功")
								}else{
									alert("拒绝失败")
								}
								location.reload()
							}
						});
						}
				    })
</script>

</html>